import { Button, Modal } from 'antd';
import React, { useState,useEffect,useRef } from 'react';
import { Checkbox, Form, Input } from 'antd';
import {dispatch, useDispatch} from "react-redux"
import * as action from "../action"
const Dirlog = (props) => {
    const dispatch = useDispatch()
    const [isModalVisible, setIsModalVisible] = useState(false);
    const myref = useRef(null)
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        props.showmodel(false)
    };

    const handleCancel = () => {
        props.showmodel(false)
    };
    const onFinish = (values) => {
        console.log('Success:', values);
        values.key = new Date().getTime()
        if (props.isedit === "新增") {
            dispatch(action.addfn(values))
         
        } else {
            dispatch(action.eidtfn(Object.assign({},values,{editindex:props.editindex})))
        }
        props.showmodel(false)
      
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    useEffect(()=>{
        console.log(myref);
        if (props.isedit === "编辑") {
            myref.current.setFieldsValue(props.edititem)
        } else {
            myref.current.resetFields()
        }
    },[props.isedit])
    return (
        <>

            <Modal title={props.isedit} forceRender visible={props.flag} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <Form
                    ref = {myref}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="name"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="address"
                        name="address"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="date"
                        name="date"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default Dirlog;